<template>
  <view class="tab_bar" :style="colorStyle">
    <view
      v-for="(item, index) in list"
      :key="index"
      class="tab-bar-item flex_fc"
      @click="JumpPath(item.pagePath)"
    >
      <image
        class="tab_img"
        :class="{ middle: !item.text }"
        :src="selected === item.id ? item.selectedIconPath : item.iconPath"
      ></image>
      <view class="tab_text">
        <text :class="{ active: selected === item.id }">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>
<script setup>
import { JumpPath } from "@/utils/index";
import { useTheme } from '@/composables/useTheme'
const { colorStyle } = useTheme()
let props = defineProps({
  selected: {
    type: Number,
    default: 1,
  },
});
let list = [
  {
    pagePath: "/pages/tabbar/home",
    text: "首页",
    iconPath: "/static/images/tabbar/1-1.png",
    selectedIconPath: "/static/images/tabbar/1-2.png",
    id: 1,
  },
  {
    pagePath: "/pages/tabbar/about",
    text: "关于",
    iconPath: "/static/images/tabbar/2-1.png",
    selectedIconPath: "/static/images/tabbar/2-2.png",
    id: 2,
  },

  {
    pagePath: "/pages/tabbar/my",
    text: "我的",
    iconPath: "/static/images/tabbar/5-1.png",
    selectedIconPath: "/static/images/tabbar/5-2.png",
    id: 3,
  },
];
</script>

<style lang="scss" scoped>
// 定义底部高度变量
$footer-height: 120rpx;
.tab_bar {
  text-align: center;
  position: fixed;
  z-index: 999;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  height: $footer-height;
  height: calc(
    $footer-height + constant(safe-area-inset-bottom)
  ); ///兼容 IOS<11.2/
  height: calc($footer-height + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  padding-bottom: calc(
    constant(safe-area-inset-bottom) + 15rpx
  ); ///兼容 IOS<11.2/
  padding-bottom: calc(env(safe-area-inset-bottom) + 15rpx); ///兼容 IOS>11.2/

  .tab-bar-item {
    position: relative;
    flex: 1;

    .middle {
      position: absolute;
      top: -70rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 137rpx !important;
      height: 137rpx !important;
    }

    .tab_img {
      width: 40rpx;
      height: 40rpx;
    }

    .tab_text {
      margin-top: 10rpx;
      font-size: 24rpx;
      color: #595959;
    }

    .active {
      font-weight: 700;
      color: var(--view-theme);
    }
  }
}
</style>
